<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>短信平台</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" th:href="@{/vendor/font-awesome/css/font-awesome.css}">
    <!-- Fontastic Custom icon font-->
    <link rel="stylesheet" th:href="@{/css/fontastic.css}">
    <!-- Google fonts - Roboto -->
    <!--<link rel="stylesheet" th:href="@{https://fonts.googleapis.com/css?family=Roboto:300,400,500,700}">-->
    <!-- jQuery Circle-->
    <link rel="stylesheet" th:href="@{/css/grasp_mobile_progress_circle-1.0.0.min.css}">
    <!-- theme stylesheet-->
    <link rel="stylesheet" th:href="@{/css/style.blue.css}" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" th:href="@{/css/custom.css}">
    <link rel="stylesheet" th:href="@{/css/toastr.css}">
    <!-- Favicon-->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <link rel="stylesheet" th:href="@{/css/file/fileinput.min.css}">
    <link rel="stylesheet" th:href="@{/css/file/explorer-fa/theme.min.css}">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
</head>
<!-- JavaScript files-->
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/vendor/popper.js/umd/popper.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js}"></script>
<script th:src="@{/js/grasp_mobile_progress_circle-1.0.0.min.js}"></script>
<script th:src="@{/vendor/jquery.cookie/jquery.cookie.js}"></script>

<script language="javascript" type="text/javascript" th:src="@{/My97DatePicker/WdatePicker.js}"></script>
<!-- Main File-->
<script th:src="@{/css/file/fileinput.js}"></script>
<script th:src="@{/css/file/zh.js}"></script>
<script th:src="@{/css/file/explorer-fa/theme.min.js}"></script>
<script th:src="@{/js/front.js}"></script>
<script th:src="@{/js/base.js}"></script>
<script th:src="@{/js/toastr.min.js}"></script>
<script type="text/javascript">

</script>
<body>
<!-- Side Navbar -->
<div th:replace="~{/pages/common/side_navbar.html}"></div>
<div class="page">
    <!-- navbar-->
    <div th:replace="~{/pages/common/header_navbar.html}"></div>

    <!--页码代码-->
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">账号管理</a></li>
                <li class="breadcrumb-item active">账号信息</li>
            </ul>
        </div>
    </div>
    <section>
        <div class="container-fluid">
            <!-- Page Header-->
            <div class="row">
                <div class="col-lg">
                    <div class="card">
                        <div class="card-header">
                            <h4>账号列表</h4>
                        </div>

                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header d-flex align-items-center">
                                    <h4>查询</h4>
                                </div>
                                <div class="card-body">
                                    <form class="form-inline" th:action="@{/sms/account/list}" method="post">
                                        <div class="form-group col-lg-4 mb-3">
                                            <label for="addSerial" class="col-lg-3 col-sm-3 mr-3">扩展号码</label>
                                            <input id="addSerial" type="text" placeholder="" name="addSerial"
                                                   th:value="${addSerial}"
                                                   class="mr-3 col-lg-7 col-sm-7 form-control">
                                        </div>
                                        <div class="form-group col-lg-4 mb-3">
                                            <label for="userAccount" class="col-lg-3 col-sm-3 mr-3">用户名</label>
                                            <input id="userAccount" type="text" placeholder="" name="userAccount"
                                                   th:value="${userAccount}"
                                                   class="mr-3 col-lg-7 col-sm-7 form-control">
                                        </div>
                                        <div class="form-group col-lg-4 mb-3 " >
                                            <input type="submit" value="查询"
                                                   class="  mr-3 btn btn-primary">
                                            <input type="button" value="重置"
                                                   class=" mr-3 btn btn-success fromReset">
                                            <input type="button" value="导入"
                                                   class="  mr-3 btn btn-info import">
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <!--tables start -->
                        <div class="col-lg-12 grid-margin stretch-card">
                            <div class="card">
                                <div class="card-header d-flex align-items-center ">
                                    <a th:href="@{/sms/account/add}" class="btn btn-success">新增</a>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-bordered">
                                            <thead>
                                            <tr>
                                                <th class="text-center">序号</th>
                                                <th class="text-center">用户名</th>
                                                <th class="text-center">企业名称</th>
                                                <th class="text-center">服务代码</th>
                                                <th class="text-center">最近一次调用时间</th>
                                                <th class="text-center">是否外部调用</th>
                                                <th class="text-center">操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr th:each="data,loop:${data.content}">
                                                <th class="tc" scope="row" th:text="${loop.count}"></th>
                                                <td class="tc" th:text="${data.userAccount}"></td>
                                                <td class="tc" th:text="${data.ecName}"></td>
                                                <td class="tc" th:text="${data.addSerial}"></td>
                                                <td class="tc" th:text="${data.useTime}">
                                                <td class="tc" th:text="${data.isOutCall==0?'否':'是'}">

                                                <td class="tc">
                                                    <a href="javascript:void(0)" class="mr-3" data-toggle="modal"
                                                       data-target="#modalCenter"
                                                       th:onclick="delRoleMsg([[${data.id}]],[[${data.userAccount}]])">
                                                        删除</a>
                                                    <a th:href="@{/sms/account/add?id=}+${data.id}" class="mr-3 ">编辑</a>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-lg-6 float-none float-sm-left">
                                        <small th:text="'共'+${data.totalElements}+'条记录，每页'+${data.size}+'条,共'+${data.totalPages}+'页'"></small>
                                    </div>
                                    <div th:replace="~{/pages/common/pagination.html :: page(${data.number}+1, ${data.totalPages}, ${url}, 'currentPage') }"></div>
                                </div>
                            </div>
                        </div>
                        <!--tables end -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--页码-->
    <div th:replace="~{/pages/common/foot.html}"></div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body ">
                <input value="" class="del_menu_id" type="hidden">
                <p class="del_message"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary delSure" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">文件上传</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <div class="modal-body">
                <input id="file1" type="file" name="file" accept=".xls,.xlsx" class="file-loading"/>
            </div>
            <!-- <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="button" class="btn btn-primary" id="save">提交</button>
             </div>-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
    toastr.options = {
        closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）；
        debug: false, //是否为调试；
        progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
        positionClass: "toast-top-center", //消息框在页面显示的位置
        onclick: null, //点击消息框自定义事件
        showDuration: "300", //显示动作时间
        hideDuration: "1000", //隐藏动作时间
        timeOut: "2000", //自动关闭超时时间
        extendedTimeOut: "1000",
        showEasing: "swing",
        hideEasing: "linear",
        showMethod: "fadeIn",
        hideMethod: "fadeOut"
    };

    function delRoleMsg(id, name) {
        $(".del_menu_id").val(id);
        $(".del_message").text("是否确认删除账号'" + name + "'?");
    }

    $(function () {
        $(".import").click(function () {
            $("#myModal").modal("show");
        });
        //模态框 关闭前事件
        $('#myModal').on('hide.bs.modal', function () {
            window.location.reload();
        });
        //确认删除方法
        $(".delSure").click(function () {
            let id = $(".del_menu_id").val();
            $.requestAjax({
                    url: $appName + "/sms/account/delete",
                    type: "post",
                    data: {"id": id},
                    success: function (result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            setTimeout(function () {
                                window.location.reload();//刷新当前页面.
                            }, 1500)
                        } else {
                            toastr.error(result.msg);
                        }

                    }
                }
            )
        })
        $(".fromReset").on('click', function () {
            $("#appName").val("")
            window.location.href = $appName + "/sms/account/list";
        });
    })
    // 上传附件

    $("#file1").fileinput({
        language: 'zh',                                          // 多语言设置，需要引入local中相应的js，例如locales/zh.js
        theme: "explorer-fa",                               // 主题
        uploadAsync: true, //默认异步上传
        showUpload: false, //是否显示上传按钮，
        showBrowse: true,
        browseOnZoneClick: true,
        showPreview: false,
        showRemove: false,
        showCancel: false,
        showClose: false,
        dropZoneEnabled: false,
        allowedFileExtensions: ["xls", "xlsx"],//只能选择xls,和xlsx格式的文件提交
        enctype: 'multipart/form-data'

    }).on("filebatchselected", function (event, files) {
        debugger;
        var files = $("#file1")[0].files[0];
        var result = fileUpload(files);
        if(result.success){
            toastr.success(result.msg);
        }else{
            toastr.error(result.msg);
        }
        $("#myModal").modal("hide");

    })
</script>
</html>